<template>
  <div class="yy-page yy-schedule-manage">
    <div class="yy-schedule-manage_employee">
      <el-table
          :key="Math.random()"
          :data="table.data"
          :span-method="arraySpanMethod"
          row-key="_id"
          border
          lazy
          :load="onLoadItemMember"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <template v-for="column in table.columns" :key="column.field">
          <el-table-column
              v-if="column.showable && ((!column.condition && column != false) || column.condition(column))"
              :type="column.type"
              :property="column.field"
              :label="typeOf(column.label) == 'function' ? column.label() : column.label"
              :render-header="column.renderHeader"
              :width="column.width"
              :min-width="column.minWidth || 120"
              :align="column.align"
              :fixed="column.fixed || false"
              :sortable="column.sortable"
          >
            <template #default="scope" v-if="['itemCode'].includes(column.field)">
              <div v-if="scope.row._id.startsWith('room_')" style="float: right;">
                <el-link @click.stop="onSetRelation(scope.row)" :underline="false" type="primary">关联项目</el-link>
              </div>
              <div v-else>
                <span>{{scope.row[column.field]}}</span>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>

      <div class="yy-page-paging">
        <el-pagination small background layout="prev, pager, next, total" :total="table.paging.total"
                       v-model:current-page="table.paging.pageIndex"
                       v-model:page-size="table.paging.pageSize"
                       @current-change="table.paging.pageChange"
        />
      </div>
    </div>
    <RoomItemsRelation ref="roomItemsRelationRef" />
  </div>
</template>
<script setup lang="ts">
import {nextTick, onBeforeMount, reactive, ref} from "vue";
import {changeListToTree, typeOf, formatDate} from "@/utils/yayi";
import {TableColumn} from "@/model/Definition";
import {QueueScheduleModel} from "@/model/QueueScheduleModel";
import RoomApi from "@/api/queue/RoomApi";
import YjRoomItemsApi from "@/api/queue/YjRoomItemsApi";
import RoomItemsRelation from "@/views/queue/yj_room_items/RoomItemsRelation.vue";

const arraySpanMethod = ({ row, column, rowIndex,  columnIndex,  }: any) => {
  if (row._id.startsWith('room_')) {
    if (columnIndex === 1) {
      return [1, 3]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}

const table = reactive<{
  isLoading: boolean,
  paging?: any,
  columns: TableColumn[],
  data: QueueScheduleModel[],
  formats?: any
}>({
  isLoading: false,
  paging: {
    isPaging: false
  },
  columns: [
    {
      "field":"name",
      "label":"名称",
      "showable":true,
      "width": 500,
      fixed: 'left'
    },
    {
      "field":"itemCode",
      "label":"项目代码",
      "showable":true
    },{
      "field":"categoryName",
      "label":"医技类别",
      "showable":true
    },{
      "field":"categoryCode",
      "label":"类别代码",
      "showable":true
    },
  ],
  data: []
})

const roomItemsRelationRef = ref()

onBeforeMount(() => {
  listRoom()
})


const listRoom = () => {
   RoomApi.listRegRoom().then(data => {
      console.log('------list room---------', data)
     table.data = data.map(item => Object.assign({
       _id: "room_" + item.id,
       id: item.id,
       name: item.name,
       children: [],
       hasChildren: []
     }))
   })
}


const onLoadItemMember = (row, treeNode: unknown,  resolve:any) => {
  YjRoomItemsApi.listYjRoomItems(1, 9999, row.id).then(data => {
    resolve(data.map(item => Object.assign({
      _id: "yjItem_" + item.id,
      id: item.id,
      name: item.itemName,
      itemCode: item.itemCode,
      categoryCode: item.categoryCode,
      categoryName: item.categoryName
    })))
  })
}

const onSetRelation = (row) => {
  roomItemsRelationRef.value.onShowModel(row)
}

</script>
<style scoped lang="scss">
.yy-schedule-manage {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
</style>